<template>
  <div v-if="cardPrototype">
    <div class="card-info">
      <!-- 头部 -->
      <div class="app-main-top-box">
        <div class="title">卡详情</div>
        <el-button size="medium" round @click="back">返回</el-button>
      </div>

      <!-- 券信息 -->
      <div class="flexRBC">
        <div>
          <div>
            <span class="card-name"> {{ cardPrototype.cardName }}</span>&nbsp;&nbsp;
            <span class="card-type app-text-color-primary">{{ cardTypeOptions[cardPrototype.cardType] }}</span>
          </div>
          <div class="card-id"> 批次号：{{ cardPrototype.id }}</div>
        </div>
        <div v-if="!$store.getters.banBtnList.includes('BTN_MCH_COUPON_MANAGER_AND_PUT_ON')">
          <!--          <el-button-->
          <!--            v-if="cardPrototype.status==1&&!cardPrototype.channelSync&&['cash_wx_busi','discount_wx_busi','cash_wx_pay'].includes(cardPrototype.couponType)"-->
          <!--            size="small"-->
          <!--            type="primary"-->
          <!--            round-->
          <!--            @click="syncCouponChannel(cardPrototype.id)">同步券渠道-->
          <!--          </el-button>-->
          <el-button v-if="cardPrototype.status==1" size="small" type="primary" round @click="changeStatus(1)">确认激活
          </el-button>
          <el-button v-if="cardPrototype.status==1" type="info" size="small" round @click="editCard(cardPrototype.id)">
            修改配置
          </el-button>
          <el-button v-if="cardPrototype.status==2" size="small" type="warning" round @click="changeStatus(2)">暂停活动
          </el-button>
          <el-button v-if="cardPrototype.status==3" size="small" round type="primary" @click="changeStatus(4)">重启活动
          </el-button>
          <el-button
            v-if="cardPrototype.status==1||cardPrototype.status==2||cardPrototype.status==3"
            size="small"
            round
            type="danger"
            @click="changeStatus(3)"
          >终止活动
          </el-button>
        </div>
      </div>

      <!-- tab -->
      <div class="tab">
        <el-tabs v-model="tabName">
          <el-tab-pane label="详情" name="detail" />
          <el-tab-pane v-if="!$store.getters.banBtnList.includes('TAB_MCH_COUPON_PUT_ON_DATA')" label="发放数据" name="issue" />
          <el-tab-pane v-if="!$store.getters.banBtnList.includes('TAB_MCH_COUPON_CONSUME_DATA')" label="核销数据" name="verify" />
        </el-tabs>
      </div>

    </div>

    <div v-if="cardPrototype">
      <CardDetail v-if="tabName==='detail'" :card-prototype="cardPrototype" />
      <IssueRecord v-if="tabName==='issue'" :card-prototype="cardPrototype" />
      <VerifyRecord v-if="tabName==='verify'" :card-prototype="cardPrototype" />
    </div>
  </div>
</template>

<script>
import CardDetail from './CardDetail'
import IssueRecord from './IssueRecord'
import VerifyRecord from './VerifyRecord'
import { mapGetters } from 'vuex'
import { cardStatus } from '../../../api/card'

export default {
  components: {
    CardDetail,
    IssueRecord,
    VerifyRecord
  },
  data() {
    return {
      // 配置
      cardTypeOptions: {
        times: '次卡',
        gift: '礼品卡'
      },
      resolve: null,
      reject: null,
      // 状态
      loading: false,
      // 数据
      tabName: 'detail',
      cardPrototype: null
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  activated() {
  },
  mounted() {
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取
    show(row) {
      this.cardPrototype = row
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    /**
     * 按钮组
     */
    // 返回
    back() {
      this.resolve && this.resolve()
    },

    // 改变状态
    changeStatus(status) {
      const statusConfig = {
        1: {
          text: '激活卡后，顾客将可以领取/购买，点击确定按钮立即激活！',
          successMsg: '激活成功',
          status: '2',
          confirmButtonText: '确认激活'
        },
        2: {
          text: '暂停活动后，卡将不会继续发放，直到下一次人工重启活动！',
          successMsg: '暂停成功',
          status: '3',
          confirmButtonText: '确认暂停'
        },
        3: {
          text:
            '终止活动后，卡将不会继续发放且不可再重启，但是不会影响已经投放的卡！',
          successMsg: '终止成功',
          status: '4',
          confirmButtonText: '确认终止'
        },
        4: {
          text: '重启卡活动后，顾客将可以领取/购买，点击确定按钮立即重启！',
          successMsg: '重启成功',
          status: '2',
          confirmButtonText: '确认重启'
        }
      }
      this.$confirm(statusConfig[status].text, '提示', {
        confirmButtonText: statusConfig[status].confirmButtonText,
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      }).then(() => {
        const params = {
          stockId: this.cardPrototype.id,
          status
        }
        this.loading = true
        cardStatus(params)
          .then((res) => {
            this.$notify({
              title: '成功',
              message: statusConfig[status].successMsg,
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.cardPrototype.status = statusConfig[status].status
          })
          .catch(() => {
          })
          .finally(() => {
            this.loading = false
          })
      })
    },

    // 同步渠道
    // syncCouponChannel(couponId) {
    //   this.loading = true
    //   syncWxCoupon({ couponId })
    //     .then((res) => {
    //       this.$alert(res.data, '提示', {
    //         confirmButtonText: '确定',
    //         center: true,
    //         type: 'success',
    //         roundButton: true,
    //         callback: action => {}
    //       })
    //       // this.cardPrototype.channelSync = true
    //     }).finally(() => {
    //       this.loading = false
    //     })
    // },

    // 跳转编辑
    editCard(id) {
      this.$router.push({
        name: 'CardsAndOfferEditCard',
        query: { mode: 'edit', id }
      })
    }

    /**
     * 状态组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-info {
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }

    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }

    .el-tabs__active-bar {
      height: 4px;
    }

    .el-row {
      flex-wrap: wrap;
    }

    .el-card,
    .el-card__body {
      height: 100%;
    }
  }

  padding: 24px 30px 0;
  border-radius: 5px 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .card {
    &-name {
      font-size: 20px;
      font-weight: bold;
    }

    &-type {
      font-size: 14px;
    }

    &-id {
      margin-top: 10px;
      font-size: 14px;
      color: #909399;
    }
  }
}
</style>
